<template>
  <div class="container">
    <!-- 搜索框区域 -->
    <div class="search-area">
      <el-form inline class="search-form">
        <el-form-item label="输入标题：">
          <el-input
            v-model="searchTitle"
            placeholder="请输入标题"
            clearable
            class="input-style"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="orderByChange" class="button-style">
            {{ orderBy === "按时间倒序" ? "按时间升序" : "按时间倒序" }}
          </el-button>
          <el-button type="success" @click="searchInfo(searchTitle, 1, 5)" class="button-style">
            查找
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据列表区域 -->
    <div class="data-list">
      <el-table
        v-if="!isHide"
        :data="pageInfo.list"
        style="width: 100%; height: 500px"
        border
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '15px 0', fontSize: '16px' }"
      >
        <!-- 添加序号列 -->
        <el-table-column
          label="序号"
          width="60"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 跨页连续递增的序号 -->
            {{ (pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <router-link
              :to="{ name: 'newsDetail', query: { id: scope.row.id } }"
              class="table-link"
            >
              <span v-html="scope.row.title"></span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-html="scope.row.createTime"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" v-if="user!=null&&user.type==1">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="$router.push({ name: 'updateNews', query: { id: scope.row.id } })"
            >
              修改
            </el-button>
            <el-button type="text" class="delete" @click="deleteNews(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="isHide" class="no-data">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>

    <!-- 分页组件区域 -->
    <div class="pagination-area">
      <el-pagination
        v-if="!isHide"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTitle: "",
      orderBy: "按时间倒序",
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        list: []
      },
      isHide: true,
      token: null,
      user: null,
    };
  },
  methods: {
    orderByChange() {
      this.orderBy = this.orderBy === "按时间倒序" ? "按时间升序" : "按时间倒序";
      this.searchInfo(this.searchTitle, 1, 5);
    },
    searchInfo(searchTitle, pageNum, pageSize) {
      this.$axios({
        method: "post",
        url: "/api/news/page",
        data: {
          pageNum,
          pageSize,
          searchTitle,
          orderBy: this.orderBy,
        },
      })
        .then((rs) => {
          this.pageInfo = rs.data.pageInfo;
          this.isHide = this.pageInfo.list.length === 0;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleSizeChange(newSize) {
      this.searchInfo(this.searchTitle, 1, newSize);
    },
    handleCurrentChange(newPage) {
      this.searchInfo(this.searchTitle, newPage, this.pageInfo.pageSize);
    },
    deleteNews(id) {
      if (!confirm("是否确认删除")) {
        return false;
      }
      this.$axios({
        method: "post",
        url: "/api/news/deleteNews",
        data: {
          id,
        },
      })
        .then((rs) => {
          this.$message({
            message: rs.data.result,
            type: rs.data.result === "删除成功" ? "success" : "error",
          });
          if (rs.data.result === "删除成功") {
            // 删除成功后回到第一页
            this.searchInfo(this.searchTitle, 1, this.pageInfo.pageSize);
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    getTokenAndUser() {
      this.token = sessionStorage.getItem("token") || null;
      if (this.token) {
        const userData = sessionStorage.getItem("user");
        this.user = userData ? JSON.parse(userData) : null;
      }
    },
  },
  mounted() {
    this.searchInfo(this.searchTitle, 1, 5);
    this.getTokenAndUser();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.search-area {
  text-align: center;
  margin-bottom: 20px;
}

.search-form {
  display: inline-block;
}

.input-style {
  width: 200px;
}

.button-style {
  margin-left: 10px;
}

.data-list {
  width: 100%;
  overflow-y: auto;
  max-height: 550px;
}

.no-data {
  text-align: center;
  margin-top: 20px;
}

.pagination-area {
  margin-top: 20px;
  text-align: center; 
}

.table-link {
  color: #409eff;
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.el-table th, .el-table td {
  padding: 15px 0; /* 增加内边距 */
  font-size: 16px; /* 增大字体大小 */
  text-align: center; /* 文字居中 */
}

.el-table .el-table__row {
  height: 50px; 
}

.el-table {
  border-collapse: collapse; 
}

.el-table th, .el-table td {
  border: 1px solid #ebeef5; 
}

/* 自定义滚动条样式 */
.data-list::-webkit-scrollbar {
  width: 10px;
}

.data-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.data-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
</style>